<template>
  <div class="dashboard">
    <header class="header">
      <h1>超市管理系统</h1>
      <button @click="logout" class="logout-btn">退出登录</button>
    </header>
    
    <div class="menu">
      <div class="menu-item" @click="navigateTo('products')">
        <h3>商品管理</h3>
        <p>管理商品信息、库存等</p>
      </div>
      <div class="menu-item" @click="navigateTo('regions')">
        <h3>区域管理</h3>
        <p>管理区域信息</p>
      </div>
      <div class="menu-item" @click="navigateTo('stores')">
        <h3>门店管理</h3>
        <p>管理门店信息、状态等</p>
      </div>
      <div class="menu-item" @click="navigateTo('employees')">
        <h3>员工管理</h3>
        <p>管理员工信息、状态等</p>
      </div>
      <div class="menu-item" @click="navigateTo('marketing-strategies')">
        <h3>营销策略管理</h3>
        <p>管理营销策略、套餐等</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  methods: {
    navigateTo(route) {
      this.$router.push(`/${route}`)
    },
    logout() {
      localStorage.removeItem('token')
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.logout-btn {
  padding: 8px 16px;
  background-color: #f56c6c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.menu-item {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.menu-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.menu-item h3 {
  margin: 0 0 10px 0;
  color: #303133;
}

.menu-item p {
  margin: 0;
  color: #606266;
}
</style> 